<template>
  <view class="">
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control
        :current="current"
        :values="items"
        style-type="text"
        active-color="#b8d587"
        @clickItem="onClickItem"
      />
    </view>
    <view class="content">
      <scroll-view scroll-y style="height: calc(100vh - 175rpx)">
        <view v-if="current === 0">
          <view
            v-if="CourseInfo != null"
            class="item"
            v-for="CourseInfo in (index, CourseInfo)"
            @tap="SeeDetail(CourseInfo)"
            :key="CourseInfo.id"
          >
            <view class="top">
              <view class="">{{ CourseInfo.name }}</view>
              <view class="">
                <img
                  @tap.stop="ClickCancel(CourseInfo.id)"
                  style="width: 40rpx; height: 40rpx"
                  src="http://smzacc0p8.hn-bkt.clouddn.com/delete.png"
                  alt=""
                />
              </view>
            </view>
            <view class="" style="margin: 20rpx 0; color: #807c7c"
              >可容纳{{ CourseInfo.peopleNum }}人，{{
                CourseInfo.airCon === 1 ? "有空调" : "无空调"
              }}，{{
                CourseInfo.projector === 1 ? "有投影仪" : "无投影仪"
              }}</view
            >
            <view class="" style="font-size: 30rpx; font-weight: bold"
              >创建时间：<span>{{
                moment(CourseInfo.applyDate).format("YYYY-MM-DD ")
              }}</span>
            </view>
          </view>
          <view
            v-if="CourseInfo == ''"
            style="font-size: 100rpx; font-weight: 900; text-align: center"
            class=""
          >
            暂无消息
          </view>
        </view>
        <view v-if="current === 1">
          <view
            v-if="CourseInfo != null"
            class="item"
            v-for="CourseInfo in (index, CourseInfo)"
            :key="CourseInfo.id"
            @tap="SeeDetail(CourseInfo)"
          >
            <view class="top">
              <view class="">{{ CourseInfo.name }}</view>
              <view
                class=""
                v-if="CourseInfo?.isCanComment === true"
                @tap.stop="ClickReview(CourseInfo.roomId, CourseInfo.id)"
                style="color: #567722"
                >使用完成可评论</view
              >
            </view>
            <view class="" style="margin: 20rpx 0; color: #807c7c"
              >可容纳{{ CourseInfo.peopleNum }}人，{{
                CourseInfo.airCon === 1 ? "有空调" : "无空调"
              }}，{{
                CourseInfo.projector === 1 ? "有投影仪" : "无投影仪"
              }}</view
            >
            <view class="" style="font-size: 30rpx; font-weight: bold"
              >创建时间：<span>{{
                moment(CourseInfo.applyDate).format("YYYY-MM-DD ")
              }}</span>
            </view>
          </view>
          <view
            v-if="CourseInfo == ''"
            style="font-size: 100rpx; font-weight: 900; text-align: center"
            class=""
          >
            暂无消息
          </view>
        </view>
        <view v-if="current === 2">
          <view
            v-if="CourseInfo != null"
            class="item"
            v-for="CourseInfo in (index, CourseInfo)"
            :key="CourseInfo.id"
            @tap="SeeDetail(CourseInfo)"
          >
            <view class="top">
              <view class="">{{ CourseInfo.name }}</view>
            </view>
            <view class="" style="margin: 20rpx 0; color: #807c7c"
              >可容纳{{ CourseInfo.peopleNum }}人，{{
                CourseInfo.airCon === 1 ? "有空调" : "无空调"
              }}，{{
                CourseInfo.projector === 1 ? "有投影仪" : "无投影仪"
              }}</view
            >
            <view class="" style="font-size: 30rpx; font-weight: bold"
              >创建时间：<span>{{
                moment(CourseInfo.applyDate).format("YYYY-MM-DD ")
              }}</span>
            </view>
          </view>
          <view
            v-if="CourseInfo == ''"
            style="font-size: 100rpx; font-weight: 900; text-align: center"
            class=""
          >
            暂无消息
          </view>
        </view>
        <view v-if="current === 3">
          <view
            v-if="CourseInfo != null"
            class="item"
            v-for="CourseInfo in (index, CourseInfo)"
            :key="CourseInfo.id"
            @tap="SeeDetail(CourseInfo)"
          >
            <view class="top">
              <view class="">{{ CourseInfo.name }}</view>
            </view>
            <view class="" style="margin: 20rpx 0; color: #807c7c"
              >可容纳{{ CourseInfo.peopleNum }}人，{{
                CourseInfo.airCon === 1 ? "有空调" : "无空调"
              }}，{{
                CourseInfo.projector === 1 ? "有投影仪" : "无投影仪"
              }}</view
            >
            <view class="" style="font-size: 30rpx; font-weight: bold"
              >创建时间：<span>{{
                moment(CourseInfo.applyDate).format("YYYY-MM-DD ")
              }}</span>
            </view>
          </view>
          <view
            v-if="CourseInfo == ''"
            style="font-size: 100rpx; font-weight: 900; text-align: center"
            class=""
          >
            暂无消息
          </view>
        </view>
        <view v-if="current === 4">
          <view
            v-if="CourseInfo != null"
            class="item"
            v-for="CourseInfo in (index, CourseInfo)"
            :key="CourseInfo.id"
            @tap="SeeDetail(CourseInfo)"
          >
            <view class="top">
              <view class="">{{ CourseInfo.name }}</view>
            </view>
            <view class="" style="margin: 20rpx 0; color: #807c7c"
              >可容纳{{ CourseInfo.peopleNum }}人，{{
                CourseInfo.airCon === 1 ? "有空调" : "无空调"
              }}，{{
                CourseInfo.projector === 1 ? "有投影仪" : "无投影仪"
              }}</view
            >
            <view class="" style="font-size: 30rpx; font-weight: bold"
              >创建时间：<span>{{
                moment(CourseInfo.applyDate).format("YYYY-MM-DD ")
              }}</span>
            </view>
          </view>
          <view
            v-if="CourseInfo == ''"
            style="font-size: 100rpx; font-weight: 900; text-align: center"
            class=""
          >
            暂无消息
          </view>
        </view>
      </scroll-view>
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        type="warn"
        cancelText="取消"
        confirmText="同意"
        title="警告"
        content="你确定要取消预约码"
        @confirm="dialogConfirm(Id)"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="请留下你的评价"
        @confirm="ConfirmReview()"
      >
        <uni-forms ref="baseForm" :modelValue="ContentInfo">
          <uni-forms-item>
            <!-- <uni-easyinput type="textarea" v-model="ContentInfo.content" placeholder="请输入你的评价" /> -->
            <input
              type="textarea"
              v-model="ContentInfo.content"
              placeholder="请输入你的评价"
              placeholder-class="input-placeholder"
            />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="seeDetail">
      <view class="Box">
        <view style="font-weight: bold; color: #951d1d">{{
          Detail?.name
        }}</view>
        <view style="font-size: 28rpx; margin-top: 10rpx"
          >预约开始时间：<span class="time">{{
            formatTimestamp(Detail?.startTime)
          }}</span></view
        >
        <view style="font-size: 28rpx; margin-top: 10rpx"
          >预约结束时间：<span class="time">{{
            formatTimestamp(Detail?.endTime)
          }}</span></view
        >
        <view class="reason">申请理由：{{ Detail?.reason }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getCourseInfo, CancelCourse, Review } from "../../utils/reserve";
import { formatTimestamp } from "../../utils/time";
import moment from "moment";
const current = ref(0);
const Id = ref(0);
const items = ref(["待审核", "已批准", "已驳回", "已取消", "已使用"]);
const CourseInfo = ref([]);
const alertDialog = ref();
const inputDialog = ref();
const seeDetail = ref();
const ContentInfo = ref({
  content: "",
});
const Detail = ref({});
const RoomId = ref(0);
const IdE = ref(0);
onLoad(() => {
  GetCourseInfo();
});
const ConfirmReview = async () => {
  if (ContentInfo.value.content) {
    const res = await Review(
      { v1: RoomId.value, v3: IdE.value },
      ContentInfo.value.content
    );
    if (res.data.code == 200) {
      uni.showToast({
        title: "评论成功",
      });
      GetCourseInfo();
    }
  } else {
    uni.showToast({
      title: "请填写评论",
    });
  }
};
const ClickReview = (roomId, id) => {
  ContentInfo.value.content = "";
  RoomId.value = roomId;
  IdE.value = id;
  inputDialog.value.open("center");
  console.log(RoomId.value, IdE.value);
};
const GetCourseInfo = async () => {
  const res = await getCourseInfo(current.value);
  console.log(res);
  if (res.data.code == 200) {
    CourseInfo.value = res.data.data;
  }
};
const onClickItem = async (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
    const res = await getCourseInfo(current.value);
    console.log(res);
    if (res.data.code == 200) {
      CourseInfo.value = res.data.data;
    }
  }
};
// 取消预约
const ClickCancel = (id) => {
  Id.value = id;
  alertDialog.value.open("center");
};
// 同意取消
const dialogConfirm = async (id) => {
  const res = await CancelCourse(id);
  if (res.data.code == 200) {
    uni.showToast({
      title: "预约取消",
    });
    GetCourseInfo();
  }
  console.log(id);
};
//查看详情
const SeeDetail = (CourseInfo) => {
  Detail.value = CourseInfo;
  seeDetail.value.open("center");
};
</script>

<style lang="scss">
page {
  height: 100vh;
  background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
}

.content {
  padding: 50rpx;
  .item {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 30rpx;
    margin-bottom: 30rpx;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      font-weight: 900;
    }
  }
}
.Box {
  width: 500rpx;
  height: 400rpx;
  background-color: #b8d587;
  border-radius: 20rpx;
  padding: 20rpx;
  .reason {
    padding: 10rpx 0rpx;
    font-size: 28rpx;
    font-weight: bold;
  }
}
</style>